<template>
    <div class="view">
        <nav-bar title="课程详情" backgroundColor="#7bbcff" color="#fff">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="course-wrap">
            <cube-scroll ref="scroll">
                <div class="course-main">
                    <div class="title">
                        {{courseDetail.CourseName}}
                    </div>
                    <div class="time">
                        {{courseDetail.PlantSpan + courseDetail.PlantTime}}
                    </div>
                    <div class="address">
                        {{courseDetail.BranchCode}}
                    </div>
                    <div class="price-hour">
                        <div class="price">{{courseDetail.Price}}</div>
                        <div class="hour">总课时：{{courseDetail.CourseTimes}}</div>
                    </div>
                </div>
                <!--<div class="cut">-->
                <!--<div class="line"></div>-->
                <!--<div class="txt">评价</div>-->
                <!--<div class="line"></div>-->
                <!--</div>-->
                <div class="comment">
                    <div class="title">
                        <div class="text">课程评价({{commentList == null ? '0':commentList.length}})</div>
                        <div class="all">查看全部</div>
                        <div class="icon cubeic-arrow"></div>
                    </div>
                    <div class="content" v-if="commentList != null ">
                        <div class="user">
                            <div class="name">
                                {{commentList[0].StId}}
                            </div>
                        </div>
                        <div class="text ellipsis">
                            {{commentList[0].Comment}}
                        </div>
                    </div>
                    <div class="content" v-else>
                        <div class="no-data">该课程暂无评价内容~</div>
                    </div>
                </div>
                <div class="detail">
                    <div class="title">
                        <div class="text">课程详情</div>
                    </div>
                    <div class="rich-text">
                        <div class="article" v-html="courseDetail.Introduce">

                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
        <div class="bottom">
            <div class="small-btn" @click="navigateToSchedule">
                <span class="icon iconfont icon-gouwuche"></span>
                <span class="txt">选课单</span>
            </div>
            <!--<div class="small-btn">-->
            <!--<span class="icon iconfont icon-shouqianzixun"></span>-->
            <!--<span class="txt">咨询</span>-->
            <!--</div>-->
            <div class="small-btn" @click="toDofavorite">
                <span class="icon iconfont icon-aixin1" v-show="!isFavorite"></span>
                <span class="icon iconfont icon-aixin" v-show="isFavorite"></span>
                <span class="txt">收藏</span>
            </div>
            <div class="small-btn normal-btn bar-btn cart" @click="addCart">
                加入选课单
            </div>
            <div class="small-btn normal-btn bar-btn buy" @click="buy">
                立即报名
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar
        }
    })
    export default class CourseDetail extends Scene {

        private courseId: number = -1;
        private courseDetail: object = {};
        private commentList: Array<object> | null = null;
        private isFavorite: boolean = false;

        @State("UserStore")
        private user!: InterfaceUser;

        private back() {
            this.navigateBack();
        }

        @Watch("courseId")
        private watchCourseId(newVal: number) {
            Http.get(this.api.GetDetailInfo, CommonUnit.argumentWithUser(this.user, {id: newVal})).then((res) => {
                this.isFavorite = false;
                if (res.Success) {
                    this.courseDetail = res.Data.Detail;
                    this.commentList = res.Data.CommentList;
                    (this.courseDetail as any).Introduce = CommonUnit.decodeHtml((this.courseDetail as any).Introduce).replace(/\<img/gi, "<img style=\"max-width:100%;height:auto\"");
                }
                this.$nextTick(() => {
                    setTimeout(() => {
                        (<any> this).$refs.scroll.refresh();
                    }, 300);

                });
            });
        }

        public mounted(): void {
            this.courseId = Number(this.$route.query.courseId);
        }

        private toDofavorite(): void {
            Http.get(this.api.favorite, CommonUnit.argumentWithUser(this.user, {courseId: this.courseId, flag: !this.isFavorite})).then((res) => {
                if (res.Success) {
                    this.isFavorite = !this.isFavorite;
                } else {
                    const toast = (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    });
                    toast.show();
                }
            });
        }

        private addCart(): void {
            Http.get(this.api.addCourse, CommonUnit.argumentWithUser(this.user, {courseId: this.courseId})).then((res) => {
                const toast = (<any> this).$createToast({
                    mask: true,
                    type: res.Success ? "correct" : "warn",
                    time: 1500,
                    txt: res.Message,
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(res)) {
                            this.navigateLoginPage();
                        }
                    }
                });
                toast.show();
            });
        }

        private buy(): void {

            Http.get(this.api.createCourseOrder, CommonUnit.argumentWithUser(this.user, {courseId: this.courseId})).then((res) => {
                if (res.Success) {
                    this.navigateTo({
                        name: "orderConfirm",
                        query: {
                            orderId: res.Data.Id,
                            type: 1
                            //    type:1 课程订单
                        }
                    });
                } else {
                    (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    }).show();
                }
            });
        }

        private navigateToSchedule(): void {
            this.navigateTo({
                name: "schedule"
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;

    .course-wrap
        height calc(100vh - 55px - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding-top calc(44px + env(safe-area-inset-top));
        box-sizing content-box;

    .course-main
        background #fff;
        padding 0 10px 10px 10px;
        display flex;
        flex-direction column;
        flex-wrap nowrap;

        .title
            color #000;
            padding 10px 0;
            font-weight 700;
            line-height 30px;
            font-size 19px;

        .time, .address
            color $theme-auxiliary-color;
            font-size 12px;
            line-height 22px;

        .price-hour
            display flex;
            flex-direction row;
            justify-content space-between;
            align-items center;
            padding-top 5px;

            .price
                color #ffb400;
                font-size 17px;
                position relative;
                line-height 25px;

                &:before
                    content '¥';
                    font-size 13px;
                    padding-right 2px;

            .hour
                font-size 12px;
                color $theme-auxiliary-color;

    .cut
        height 30px;
        line-height 30px;
        display flex;
        justify-content center;
        align-items center;
        opacity .8;

        .line
            display inline-block;
            width 15%;
            border-top 1px solid $theme-advancing-color;

        .txt
            color $theme-advancing-color;
            padding 0 10px;
            vertical-align middle;
            font-size 12px;

    .comment, .detail
        margin-top 10px;
        background #fff;

        .title
            height 42px;
            line-height 42px;
            display flex;
            position relative;

            .text
                width fit-content;
                height 100%;
                font-size 13.5px;
                margin-left 10px;
                color #333;
                justify-content flex-start;
                box-align center;
                align-items center;

            .all
                color #ff5000;
                position absolute;
                width fit-content;
                height 24px;
                line-height 24px
                font-size 12px;
                right 0;
                top 9px;
                margin-right 27px;
                justify-content flex-start;
                box-align center;
                align-items center;

            .icon
                position: absolute;
                display flex;
                width fit-content;
                height 14px;
                right 0;
                top 14px;
                margin-right 8.5px;
                color #ff5000;
                font-size 13px;
                line-height 14px;

    .comment
        .content
            width 100%;
            height: 70px;
            position relative;

            .user
                height 20px
                display flex;
                width 100%;

                .face
                    height 20px;
                    width 20px;
                    margin-left 10px;
                    overflow hidden;
                    border-radius 20px;

                    img
                        height 20px;
                        width 20px;

                .name
                    height 18px;
                    padding-top 2px;
                    line-height 20px;
                    color #999;
                    padding-left 15px;
                    font-size 12px;

            .text
                padding 15px 10px;
                font-size 13px;
                color #333;
                text-align left;

    .rich-text
        padding 0 10px;

        .article
            position relative;

            &img
                width 100%;

    .bottom
        height 55px;
        position fixed;
        width calc(100vw - 10px);
        padding-right 10px;
        display flex;
        z-index 110;
        flex-direction row;
        padding-bottom env(safe-area-inset-bottom);
        box-shadow: rgba(0, 0, 0, 0.15) 0 -1px 10px 0;
        align-items center;
        background #fff;
        bottom: 0;
        box-sizing content-box

        .small-btn, .normal-btn
            display flex;
            box-orient vertical;
            box-direction normal;
            flex-direction column;
            box-pack center;
            justify-content center;
            padding 0 9.6px;
            width 48px;
            height 48px;
            box-sizing border-box;
            white-space nowrap;
            align-items center;
            color #999;

            span.icon
                padding-top 2px;
                font-size 20px;
                color $theme-contrast-color

            span.txt
                padding-top 2px;
                font-size 11px;
                line-height 19.2px;

        .bar-btn
            width 51%;
            height 39px;
            bottom 9px;
            color #fff;
            text-align center;
            font-size 13.5px;
            line-height 1px;
            padding: 0;
            cursor pointer
            font-style: 14px;

        .normal-btn
            width calc((100% - 48px * 2) / 2 - 10px);

        .cart
            margin-left 15px;
            background $theme-common-color
            border-radius: 39px 0 0 39px;

        .buy
            background $theme-advancing-color;
            border-radius: 0 39px 39px 0;
            margin-left -1px
</style>
